import React, {useEffect, useState} from 'react';
import {Card, Image, List, Modal, Skeleton, Tabs} from "antd";
import classes from "../../Activity/MyActivity/index.module.scss";
import moment from "moment/moment";
import {useSelector} from "react-redux";
import { reqGetMyShopping} from "../../../../api/frontDesk/frontDeskApi";


const MyCart = () => {
    const {userAllInfo} = useSelector(state => state.persistedReducer.user)
    const [list, setList] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);

    const items = [
        {
            key: 'myShopping',
            label: `我的商品`,
            children: (
                <List
                    itemLayout="horizontal"
                    dataSource={list}
                    renderItem={(item) => (
                        <List.Item actions={[<a onClick={() => checkShop(item)}>查看详情</a>]}>
                            <Skeleton avatar title={false} loading={item.loading} active>
                                <List.Item.Meta
                                    title={item.shop_name}
                                    style={{display: 'flex', alignItems: 'center'}}
                                    avatar={<Image width={150} src={item.cover}/>}
                                    description={'￥' + item.price}
                                />
                            </Skeleton>
                            <Modal
                                title="商品详情"
                                open={isModalOpen}
                                onOk={handleOk}
                                okText="确认"
                                cancelText="取消"
                                maskStyle={{background:'rgba(0,0,0,.1)'}}
                                onCancel={handleCancel}
                            >
                                <div style={{display: 'flex', justifyContent: 'center', height: 240}}>
                                    <div className={classes.Content}>
                                        <span>购买时间：{moment(item.start_time).format('YY-MM-DD HH:MM:SS')}</span>
                                        <span>运费：{'￥' + item.freight}</span>
                                    </div>
                                </div>
                            </Modal>
                        </List.Item>

                    )}
                />
            ),
        },
    ];


    useEffect(() => {
        getData()
    }, [])

    const getData = async () => {
        const result = await reqGetMyShopping({user_id: userAllInfo.id})
        setList(result.data)
    }

    const checkShop = (item) => {
        setIsModalOpen(true);
    }

    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    return (
        <div>
            <Card style={{height: 680,overflow:'auto'}}>
                <Tabs defaultActiveKey="myShopping" items={items}/>
            </Card>
        </div>
    );
};

export default MyCart;